<template>
	<div class="range">
		<el-input-number
			:value="minV"
			@change="inputMin"
			:controls="false"
			class="num"
			v-if="type === 'number'"
			:precision="config.precision"
		></el-input-number>
		<span class="flag">~</span>
		<el-input-number
			:value="maxV"
			@change="inputMax"
			:controls="false"
			class="num"
			v-if="type === 'number' || type === 'statistics'"
			:precision="config.precision"
		></el-input-number>
	</div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({
  name: 'range'
})
export default class extends Vue {
  @Prop() public value!: any[];
  @Prop() public config!: { fieldFixed: string };
  @Prop({ default: 'number' }) public type!: string;
  private get minV () {
    const v = this.value['min' + this.config.fieldFixed];
    return v === null ? undefined : v;
  }

  private get maxV () {
    const v = this.value['max' + this.config.fieldFixed];
    return v === null ? undefined : v;
  }

  private inputMin (value) {
    if (value === undefined) {
      this.value['min' + this.config.fieldFixed] = null;
    } else {
      this.value['min' + this.config.fieldFixed] = value;
    }
    this.$emit('on-change');
  }

  private inputMax (value) {
    if (value === undefined) {
      this.value['max' + this.config.fieldFixed] = null;
    } else {
      this.value['max' + this.config.fieldFixed] = value;
    }
    this.$emit('on-change');
  }
}
</script>

<style lang="stylus" scoped>
	.range {
		display flex
		align-items: center
		.append {
			flex-shrink 0
			padding-left 10px
		}
		.num {
			width calc(50% - 16px)
		}
		.flag {
			padding 0 10px
			flex-shrink 0
		}
	}
</style>
